<template>

    <!-- 所有的内容要被根节点包含起来 -->
    <div id="" class="cmt-cont">
        <h3>发表评论</h3>
        <hr>

        <textarea placeholder="请输入要评论的内容(最多吐槽120字)" maxlength="120"></textarea>

        <mt-button type="primary" size="large">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="( item, i ) in comments" :key="item.time">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户: {{item.name}}&nbsp;&nbsp;发表时间: {{item.time | dateFormat }}
                </div>
                <div class="cmt-body">
                    {{ item.comment == null ? '此用户很懒, 什么都还没说' : item.comment }}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain>加载更多</mt-button>

    </div>


</template>

<script type="text/javascript">

    import {Toast} from 'mint-ui'

    export default {
        data: function () {
            return {
                comments: []
            }
        },
        props: ["id"],
        created() {
            this.getComments()
        },
        // 执行的方法
        methods: {
            getComments() {
                this.$http.get('./src/FalseData/getImgGes.json').then(res => {
                    if (res.body.status === 0) {
                        this.comments = res.body.message
                    } else {
                        Toast("获取评论信息失败")
                    }
                })
            }
        }
    }

</script>

<style lang="scss" scoped>
    .cmt-cont {

        h3 {
            font-size: 18px;
        }

        textarea {
            font-size: 14px;
            height: 85px;
            margin: 0;
            padding: 5px !important;
        }
    }

    .cmt-list {
        margin: 5px 0;

        .cmt-item {
            font-size: 13px;

            .cmt-title {
                line-height: 30px;
                background-color: #cccccc;
            }

            .cmt-body {
                line-height: 30px;
                text-indent: 2em;
            }
        }
    }

</style>
